<style>
</style>

<template>
  <div class="__role-view-con">
    <Row>
      <Col span="16" style="padding-right: 10px">
        <table-view :data="tableData"
                    @on-remove-role="handleRemoveRole"
                    @on-update-role="handleUpdateRole"
        />
      </Col>

      <Col span="8">
        <role-form :tree-data="treeData" @on-submit="handleFormSubmit"/>
      </Col>
    </Row>

  </div>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  import TableView from './component/table'
  import RoleForm from './component/form'
  import {_ChildLoading} from "_libs/util";

  export default {
    name: 'RoleView',
    data() {
      return {
        treeData: []
      }
    },
    computed: {
      ...mapState('system', {
        tableData: state => state.role.roleList
      })
    },
    methods: {
      ...mapActions('system/role', [
        'listRole',
        'addRole',
        'removeRole'
      ]),
      ...mapActions('system/module', [
        'listModule'
      ]),
      ...mapActions('system/function', [
        'listFunction'
      ]),
      handleFormSubmit(form, loadingCb) {
        if (form.function === undefined) {
          this.treeData.forEach(datas => {
            datas.children.forEach(children => {
              if (children.checked) {
                form.functions.push(children.function.id)
              }
            })
          })
        }
        let res = this.addRole(form);
        _ChildLoading(res, () => {
          this.$Message.success('角色添加成功')
        }, loadingCb)
      },
      handleRemoveRole(role, loadingCb) {
        let res = this.removeRole(role);
        _ChildLoading(res, () => {
          this.$Message.success('角色删除成功')
        }, loadingCb)
      },
      handleUpdateRole(role) {

        this.treeData.forEach(datas => {
          this.$delete(datas, 'checked')
          datas.children.forEach(children => {
            this.$delete(children, 'checked')
          })
        })

        this.treeData.forEach(data => {
          data.children.forEach(children => {
            role.functions.forEach(func => {
              if (func.id === children.function.id) {
                this.$set(children, 'checked', 'true')
              }
            })
          })
        })
      }

    },
    created() {
      this.listRole();
      this.listModule().then(moduleList => {
        for (let i in moduleList) {
          let module = moduleList[i]
          this.treeData.push({
            title: module.name,
            module,
            children: []
          })
        }
        this.listFunction().then(functionList => {
          functionList.forEach(func => {
            this.treeData.forEach(ele => {
              if (ele.module.id === func.module.id) {
                ele.children.push({
                  title: func.name,
                  'function': func
                })
              }
            })
          })
        });
      });

    },
    components: {
      TableView,
      RoleForm
    }
  }
</script>
